<template>
    <div class="top">
        <el-steps
            :active="orderItem.status == 2 ? '3' : (orderItem.status == 4 ? '1' : (orderItem.status == 2 ? '4' : ''))"
            finish-status="success" align-center>
            <el-step title="提交订单" :description="formateDate(orderItem.createTime)" />
            <el-step title="支付订单" :description="formateDate(orderItem.paymentTime)" />
            <el-step title="平台发货" :description="formateDate(orderItem.deliveryTime)" />
            <el-step title="确认收货" />
            <el-step title="完成评价" />
        </el-steps>
    </div>
    <div class="el-card__body">
        <div class="operate-container" style="margin-top: 0;">
            <el-icon>
                <WarningFilled />
            </el-icon>
            <span>当前订单状态：{{
                orderItem.status == 0 ? '待付款' : (orderItem.status == 1 ? '待发货' : (orderItem.status == 2 ?
                    '已发货' : (orderItem.status == 3 ?
                        '已完成' : (orderItem.status == 4 ? '已关闭' : ''))))
            }}</span>
            <div class="operate-button-container">
                <el-button size="small" v-if="orderItem.status == 2 || orderItem.status == 3">订单跟踪</el-button>
                <el-button size="small" v-if="orderItem.status == 2 || orderItem.status == 3">发送站内信</el-button>
                <el-button size="small" @click="deleUser">删除订单</el-button>
                <el-button size="small" @click="RemarksOrder">备注订单</el-button>
            </div>
        </div>
        <div class="table-layout">
            <div class="icon-title">
                <el-icon>
                    <Briefcase />
                </el-icon>
                <span>基本信息</span>
            </div>
            <table>
                <tr>
                    <th>订单编号</th>
                    <th>发货单流水号</th>
                    <th>用户账号</th>
                    <th>支付方式</th>
                    <th>订单来源</th>
                    <th>订单类型</th>
                </tr>
                <tr>
                    <td>{{ orderItem.orderSn }}</td>
                    <td>$100</td>
                    <td>{{ orderItem.memberUsername }}</td>
                    <td>{{ orderItem.payType == 1 ? '支付宝' : (orderItem.payType == 2 ? '微信' : '') }}</td>
                    <td>{{ orderItem.sourceType == 1 ? 'APP订单' : 'PC订单' }}</td>
                    <td>{{ orderItem.orderType === 0 ? '正常订单' : '秒杀订单' }}</td>
                </tr>
                <tr>
                    <th>配送方式</th>
                    <th>物流单号</th>
                    <th>自动收货时间</th>
                    <th>订单可得优币</th>
                    <th>订单可得值</th>
                    <th>活动信息</th>
                </tr>
                <tr>
                    <td>{{ orderItem.deliveryCompany }}</td>
                    <td>{{ orderItem.deliverySn }}</td>
                    <td>{{ orderItem.autoConfirmDay }}天</td>
                    <td>{{ orderItem.integration }}</td>
                    <td>{{ orderItem.growth }}</td>
                    <td>
                        <p class="title">{{ orderItem.promotionInfo }}</p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="table-layout">
            <div class="icon-title">
                <el-icon>
                    <Briefcase />
                </el-icon>
                <span>收货人信息</span>
            </div>
            <table>
                <tr>
                    <th>收货人</th>
                    <th>手机号码</th>
                    <th>邮政编码</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>{{ orderItem.receiverName }}</td>
                    <td>{{ orderItem.receiverPhone }}</td>
                    <td>{{ orderItem.receiverPostCode }}</td>
                    <td>
                        <p class="title">
                            {{
                                orderItem.receiverProvince + ' ' + orderItem.receiverCity + ' ' + orderItem.receiverRegion +
                                    ' ' + orderItem.receiverDetailAddress
                            }}
                        </p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="table-layout">
            <div class="icon-title">
                <el-icon>
                    <Briefcase />
                </el-icon>
                <span>商品信息</span>
            </div>
            <el-table :data="orderItem.orderItemList" border style="width: 95%;margin: auto;">
                <el-table-column label="商品图片">
                    <template #default="{ row }">
                        <img style="width:80px;height:80px" :src="row.productPic" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" width="200">
                    <template #default="{ row }">
                        <p>{{ row.productName }}</p>
                        <p>{{ "品牌："+row.productBrand }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="价格/货号">
                    <template #default="{ row }">
                        <p>{{ "价格："+ filters(row.productPrice) }}</p>
                        <p>{{ "货号："+row.productSn }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="属性">
                    <!-- <template #default="{ row }">
                        <span v-for="item in row.productAttr">
                            {{ item.key }}{{ item.value }}</span>
                    </template> -->
                </el-table-column>
                <el-table-column prop="productQuantity" label="数量" />
                <el-table-column label="小计">
                    <template #default="{ row }">
                        {{ filters(row.productPrice * row.productQuantity) }}
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 40px;">合计：<span style="color:#f56c6c">{{
                filters(orderItem.totalAmount)
            }}</span>
            </div>
        </div>
        <div class="table-layout">
            <div class="icon-title">
                <el-icon>
                    <Briefcase />
                </el-icon>
                <span>费用信息</span>
            </div>
            <table>
                <tr>
                    <th>商品合计</th>
                    <th>运费</th>
                    <th>优惠券</th>
                    <th>积分抵扣</th>
                </tr>
                <tr>
                    <td>{{ filters(orderItem.totalAmount) }}</td>
                    <td>{{ filters(orderItem.freightAmount) }}</td>
                    <td>{{ "-"+filters(orderItem.couponAmount) }}</td>
                    <td>{{ "-"+filters(orderItem.integrationAmount) }}</td>
                </tr>
                <tr>
                    <th>活动优惠</th>
                    <th>折扣金额</th>
                    <th>订单总金额</th>
                    <th>应付款金额</th>
                </tr>
                <tr>
                    <td>{{ "-"+filters(orderItem.promotionAmount) }}</td>
                    <td>{{ "-"+filters(orderItem.discountAmount) }}</td>
                    <td style="color:#f56c6c">{{ filters(orderItem.totalAmount) }}</td>
                    <td style="color:#f56c6c">{{
                        filters(orderItem.totalAmount +
                            orderItem.freightAmount - orderItem.couponAmount - orderItem.integrationAmount
                            - orderItem.promotionAmount - orderItem.discountAmount)
                    }}
                    </td>
                </tr>
            </table>
        </div>
        <div class="table-layout">
            <div class="icon-title">
                <el-icon>
                    <Briefcase />
                </el-icon>
                <span>操作信息</span>
            </div>
            <el-table :data="orderItem.historyList" border style="width: 95%;margin: auto;" table-layout="auto"
                cell-class-name="align-c">
                <el-table-column prop="operateMan" label="操作者" />
                <el-table-column label="操作时间">
                    <template #default="{ row }">
                        <p>{{ formateDate(row.createTime) }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="订单状态">
                    <template #default="{ row }">
                        <p>{{
                            row.orderStatus == 0 ? '待付款' : (row.orderStatus == 1 ? '待发货' : (row.orderStatus == 2 ?
                                '已发货' : (row.orderStatus == 3 ?
                                    '已完成' : (row.orderStatus == 4 ? '已关闭' : ''))))
                        }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="付款状态">
                    <template #default="{ row }">
                        <p>{{
                            row.orderStatus == 0 ? '待付款' : (row.orderStatus == 1 ? '待发货' : (row.orderStatus == 2 ?
                                '已支付' : (row.orderStatus == 3 ?
                                    '已完成' : (row.orderStatus == 4 ? '已退款' : ''))))
                        }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="发货状态">
                    <template #default="{ row }">
                        <p>{{
                            row.orderStatus == 2 ?
                                '已发货' : (row.orderStatus == 4 ? '已发货' : '')
                        }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="note" label="备注" />
            </el-table>
        </div>
    </div>
    <orderRemarks :isShow="showDialog" :status="isStatus" @hide="closeDialog" />
</template>

<script setup lang='ts'>
import { getOrderApi, getOrderDeleteApi } from './api';
import { useRoute, useRouter } from "vue-router"
import { computed, ref, watch } from 'vue';
import { formateDate } from "@/utils/index";
import { WarningFilled, Briefcase } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import orderRemarks from "./components/orderRemarks.vue"

const route = useRoute()
const router = useRouter()

let orderItem = ref<RootOrder>({} as any)

const showDialog = ref(false)

const isStatus = ref(0)

const GetOrderIdApi = () => {
    getOrderApi(parseInt(route.query.id as string)).then(res => {
        if (res.code === 200) {
            orderItem.value = res.data
            isStatus.value = res.data.status
        }
    })
}
GetOrderIdApi()


const filters = (val: number) => {
    if (!val) return '￥0';
    return '￥' + val;
}

// 删除订单
const deleUser = () => {
    ElMessageBox.confirm("是否要进行该删除操作?", "提示?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    }).then(() => {
        getOrderDeleteApi(parseInt(route.query.id as string)).then(res => {
            if (res.code === 200) {
                ElMessage.success('删除成功')
                router.push('/oms/order')
            }
        })
    })
}

// 备注订单
const RemarksOrder = () => {
    showDialog.value = true
}

// 子传父触发
const closeDialog = (val: boolean) => {
    showDialog.value = false
    if (val) GetOrderIdApi()
}
</script>

<style scoped lang="less">
:deep(.align-c),
:deep(.cell) {
    text-align: center;
}

.top {
    width: 75%;
    margin: 20px auto;
}

.el-card__body {
    width: 80%;
    margin: 10px auto;
    border: 1px solid #dcdfe6;

    .operate-container {
        padding: 20px;
        background-color: #f2f6fc;

        .el-icon {
            color: #f56c6c;
        }

        span {
            color: #f56c6c;
        }

        .operate-button-container {
            float: right;
        }
    }

    .table-layout {
        .icon-title {
            display: flex;
            align-items: center;
            padding: 15px 25px;

            span {
                font-size: 14px;
                color: #606266;
            }
        }

        table {
            width: 95%;
            margin: auto;
        }

        table,
        tr,
        th,
        td {
            border-spacing: 0;
            border: 1px solid #dcdfe6;
            text-align: center;
            font-size: 14px;
        }

        th {
            background: #f2f6fc;
            color: #303133;
            padding: 10px 0;
        }

        td {
            padding: 20px 0;
            color: #606266;

            .title {
                width: 10em;
                margin: auto;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
